import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import { SHOW_TABBAR_MUTATION, HIDE_TABBAR_MUTATION } from '@/type'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 共享状态
    isTabBarShow: true,
    comingsoonlist: [] // 要缓存的数据
  },
  mutations: {
    [SHOW_TABBAR_MUTATION] (state, payload) {
      // 显示TabBar
      state.isTabBarShow = payload
    },
    [HIDE_TABBAR_MUTATION] (state, payload) {
      // 隐藏TabBar
      state.isTabBarShow = payload
    },
    ComingSoonMutation (state, payload) {
      // 第三步，修改状态state里的comingsoonlist的值
      state.comingsoonlist = payload
    }
  },
  actions: {
    GetComingSoonAction (store) {
      // 发ajax请求
      axios({
        url: 'https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=2&k=1716555',
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16318468911969714951618561"}',
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then(res => {
        console.log(res.data)
        // 第二步：把获得的数据提交给mutation 来操作状态
        store.commit('ComingSoonMutation', res.data.data.films)
      })
    }
  },
  getters: {
    // 对state中的属性进行数据加工 相当于state中的计算属性
    filterComingSoonList (state) {
      return state.comingsoonlist.filter((item, index) => index < 5)
    }
  },
  modules: {}
})
